<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            基于Ajax发送一个get请求
            1.查看xmlHttpRequest的构造函数，如何创建xmlHttpReqyest
            2.XMLHttpRequest.open()方法初始化一个新创建的请求，或重新初始化一个请求。
                xhrReq.open(method, url, async, user, password);
            3.XMLHttpRequest.send() 方法用于发送 HTTP 请求
                在 XHR 请求中要发送的数据体。可以是：
                    比如说是POST请求，就需要把POST请求的参数传入，如果是GET请求，就不需要传入参数
            4.处理服务端的响应内容

         */
         
         //1.创建XMLHttpRequest对象
         const request = new XMLHttpRequest();

         //2.方法初始化一个新创建的请求，GET请求的参数是在？后面
         request.open("GET","http://www.biwuit.cn/spboot/userLoginGetRequest?username=admin&password=66666")

         //3.发送请求
         request.send();

         //4.如何接受服务端的响应内容
         /* 
            通过onreadystatechange来监听服务端响应的结果
            只读属性  XMLHttpRequest.status  返回了响应中的数字状态码
            XMLHttpRequest.responseText 在一个请求被发送后，从服务器端返回文本。

            onreadystatechange      当 readyState 的值改变的时候，callback 函数会被调用

          */
         request.onreadystatechange = function(){
             console.log(request.readyState)
             //响应完成并且响应成功的话，就获取服务端响应的内容
             if(request.readyState==4&&request.status==200){
                //  console.log(request.status)
                console.log(request.responseText)
             }
         }
    </script>
</body>
</html>